import React from 'react'
import { Tabs } from 'antd'
import style from './index.module.less'
import Instrictions from './components/instructions'
import PlatformGaikuang from './components/platformGaikuang'
import Attention from './components/attention'
import { messageCenterContext } from './context'
import store from './hooks/hook'

export default () => {
  const storeData = store()
  const items = [
    {
      label: '特别注意',
      key: '4',
      children: <Attention />,
    },
    {
      label: '平台概况',
      key: '1',
      children: <PlatformGaikuang />,
    },
    {
      label: '操作指南',
      key: '2',
      children: <Instrictions />,
    },
  ]
  return (
    <messageCenterContext.Provider value={storeData}>
      <div className={style.messageBox}>
        <div>
          <Tabs
            activeKey={storeData.tabsActive}
            defaultActiveKey={items[0].key}
            onChange={storeData.changeTabs}
            items={items}
          />
        </div>
      </div>
    </messageCenterContext.Provider>
  )
}
